블로그를 수정하며 @emotion을 사용하게 되었습니다.
사용하면서 학습한 두가지 스타일에 대하여 정리합니다.
// Kebab Case
const Style1 = styled.div`
font-size: 20px;
font-weight: 700;
`
// Camel Case
const Style2 = styled('div')(() => ({
fontSize: '15px',
color: 'blue',
}))위와 같이 Kebab Case와 Camel Case에 대하여 용법의 차이가 있습니다.
Kebab Case는 -을 통해 단어를 연결하며, ‘으로 감싸지 않아도 상관없습니다.
하지만 Camel Case는 합쳐진 부분의 맨첫 문자를 대문자로 표시해야 하며, 값은 무조건 String Type으로 전달하여야 한다는 점입니다.
또한 Styled Component는 사용시 Prop를 받을 수 있는데 이때 아래와 같이 사용 가능합니다.
// Kebab Case
const Style1 = styled.div<{ disable: boolean }>`
font-size: 20px;
font-weight: 700;
text-decoration: ${( { disable }) => (disable ? 'line-through' : 'none')};
`
// Camel Case
const Style2 = styled('div')(() => ({
fontSize: '15px',
color: 'blue',
textDecoration: disable ? 'line-through' : 'none',
}))